<template>
    <el-dialog v-model="dialogVisible" :title="title" :width="width" :draggable="true" :close-on-click-modal="false"
        :close-on-press-escape="false">
        <!-- 插槽 -->
        <slot></slot>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submit" :loading="btnLoading">
                    {{ confirmText }}
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
// 对外暴露属性
const props = defineProps({
    title: String,
    width: {
        type: String,
        default: '40%'
    },
    destroyedOnClose: {
        type: Boolean,
        default: false
    },
    confirmText: {
        type: String,
        default: '提交'
    }
})
const emit = defineEmits(['submit'])
const submit = () => {
    emit('submit');
}
const dialogVisible = ref(false)

// 打开
const open = () => dialogVisible.value = true
// 关闭
const close = () => dialogVisible.value = false
// 确认按钮加载 loading
const btnLoading = ref(false)
// 显示 loading
const showBtnLoading = () => btnLoading.value = true
// 隐藏 loading
const closeBtnLoading = () => btnLoading.value = false
// 暴露给父组件
defineExpose({
    open,
    close,
    showBtnLoading,
    closeBtnLoading
})

</script>

<style scoped>
/* 封面图片样式 */
.avatar-uploader .avatar {
    width: 200px;
    height: 100px;
    display: block;
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 200px;
    height: 100px;
    text-align: center;
}
</style>    
